import React from 'react'
import { Button, Input, Row, Col, Form, Tooltip } from 'antd'
const Search = Input.Search;
import CustomTable from 'components/custom-table'
const FormItem = Form.Item;

export default {
  key: 'custom-table',
  name: 'CustomTable 自定义表格',
  author: '张然',
  description: '自定义表格，可让用户自定义每一列的显示与宽度。',
  isExampleFull: true,
  api: [
    {
      title: 'API',
      data: [{
        param: 'allColumns', description: '必填，所有列的配置，跟::Table::的::Columns::一致。', type: 'array', defaultValue: '-'
      },{
        param: 'tableOption', description: '必填，::Table::的属性，与antd的::Table::一致。', type: 'object', defaultValue: '-'
      },{
        param: 'localKey', description: '必填，存储在::localStorage::内的key名，全系统唯一不可重复。', type: 'string', defaultValue: '-'
      }],
      description: '一个antd的::Table::的二次封装，可以实现自定义每一列的顺序、宽度、浮动属性。'
    }
  ],
  example: [
    {
      title: '基础用法',
      description: '一个基础的表格展示。',
      state: {
        columns: [
          {title: '第一列', dataIndex: 'column1', width: 100},
          {title: '第二列', dataIndex: 'column2', width: '20%'},
          {title: '第三列', dataIndex: 'column3', render: data => <Tooltip title={data}>render: {data}</Tooltip>},
          {title: '第四列', dataIndex: 'column4', width: '150px'},
          {title: '第五列', dataIndex: 'column5'},
          {title: '第六列', dataIndex: 'column6'}
        ],
        allColumns: [
          {title: '第一列', dataIndex: 'column1', width: 100},
          {title: '第二列', dataIndex: 'column2', width: '20%'},
          {title: '第三列', dataIndex: 'column3', render: data => <Tooltip title={data}>render: {data}</Tooltip>},
          {title: '第四列', dataIndex: 'column4', width: '150px'},
          {title: '第五列', dataIndex: 'column5'},
          {title: '第六列', dataIndex: 'column6'},
          {title: '第七列', dataIndex: 'column7'},
          {title: '第八列', dataIndex: 'column8'}
        ],
        dataSource: [
          {column1: '1', column2: '2', column3: '3', column4: '4', column5: '5', column6: '6', column7: '7', column8: '8'},
          {column1: '11', column2: '22', column3: '33', column4: '44', column5: '55', column6: '66', column7: '77', column8: '88'},
          {column1: '111', column2: '222', column3: '333', column4: '444', column5: '555', column6: '666', column7: '777', column8: '888'}
        ]
      },
      getMethod: context => {
        return {}
      },
      getContent: context => {
        const { columns, dataSource, allColumns } = context.state;
        return (
          <div>
            <CustomTable allColumns={allColumns}
                         localKey="lib_1"
                         tableOption={{
                           columns,
                           dataSource,
                           bordered: true
                         }}/>
          </div>
        )
      }
    },
    {
      title: '带选择框的表格',
      description: '带选择框时会减掉选择框的默认宽度::62px::，带展开列时会减掉默认宽度::50px::。',
      state: {
        columns: [
          {title: '第一列', dataIndex: 'column1', width: 100},
          {title: '第二列', dataIndex: 'column2', width: '20%'},
          {title: '第三列', dataIndex: 'column3', render: data => <Tooltip title={data}>render: {data}</Tooltip>},
          {title: '第四列', dataIndex: 'column4', width: '150px'},
          {title: '第五列', dataIndex: 'column5'},
          {title: '第六列', dataIndex: 'column6'}
        ],
        allColumns: [
          {title: '第一列', dataIndex: 'column1', width: 100},
          {title: '第二列', dataIndex: 'column2', width: '20%'},
          {title: '第三列', dataIndex: 'column3', render: data => <Tooltip title={data}>render: {data}</Tooltip>},
          {title: '第四列', dataIndex: 'column4', width: '150px'},
          {title: '第五列', dataIndex: 'column5'},
          {title: '第六列', dataIndex: 'column6'},
          {title: '第七列', dataIndex: 'column7'},
          {title: '第八列', dataIndex: 'column8'}
        ],
        dataSource: [
          {column1: '1', column2: '2', column3: '3', column4: '4', column5: '5', column6: '6', column7: '7', column8: '8'},
          {column1: '11', column2: '22', column3: '33', column4: '44', column5: '55', column6: '66', column7: '77', column8: '88'},
          {column1: '111', column2: '222', column3: '333', column4: '444', column5: '555', column6: '666', column7: '777', column8: '888'}
        ]
      },
      getMethod: context => {
        return {}
      },
      getContent: context => {
        const { columns, dataSource, allColumns } = context.state;
        return (
          <div>
            <CustomTable allColumns={allColumns}
                         localKey="lib_2"
                         tableOption={{
                           columns,
                           dataSource,
                           rowSelection: {
                             onChange: (selectedRowKeys, selectedRows) => {
                               console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                             }
                           }
                         }}/>
          </div>
        )
      }
    }
  ]
}
